<template>

  <div class="limitedFlashSale">
    <div class="title">限时秒杀</div>
    <div class="saletime-tips">
      <span class="text">距结束：</span>
      <span>
        <span class="sale-time">{{ saleTime.hour }}</span>
        <span class="colon">:</span>
        <span class="sale-time">{{ saleTime.minus }}</span>
        <span class="colon">:</span>
        <span class="sale-time">{{ saleTime.second }}</span>
      </span>
    </div>
    <div class="sale-drug">
      <img :src="drugInfo.drugImg" />

    </div>
    <div class="sale-drug-info">
      <div class="drug-name">{{ drugInfo.drugName }}</div>
      <div class="sell-info">
        <div class="price">￥{{ drugInfo.price }}</div>
        <div class="sold-count">已售{{ drugInfo.soldCount }}件</div>
      </div>
    </div>
  </div>
</template>
<script>


export default {
  name: "limitedFlashSale",

  props: [],
  data() {
    return {
      saleTime: {
        hour: '02',
        minus: '18',
        second: '03'
      },
      drugInfo: {
        drugImg: '',
        drugName: '',
        price: 0,
        soldCount: 0
      }
    };
  },
  computed: {


  },
  watch: {},

  created() {
    this.initData();
  },

  methods: {
    initData() {
      this.drugInfo = {
        drugImg: require("@/static/easydrug/homePage/common.png"),
        drugName: '仁和可立克复方氨酚烷胺胶囊',
        price: 43.90,
        soldCount: 800
      }

    }
  },
};
</script>
<style scoped lang="less">
.limitedFlashSale {
  height: 100%;
  width: 100%;

  .title {
    width: 100%;
    height: 48px;
    line-height: 48px;
    border: 1px solid #EDEDED;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 20px;
    color: #000000;
    text-align: left;
    padding-left: 20px;
  }

  .saletime-tips {
    text-align: center;
    margin-top: 8px;

    .text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #8C8886;
      text-align: left;
      font-style: normal;
    }

    .colon {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #000000;
      margin-left: 5px;
      margin-right: 5px;
    }

    .sale-time {
      background: #262626;
      border-radius: 2px 2px 2px 2px;
      font-family: DIN Alternate, DIN Alternate;
      font-weight: bold;
      font-size: 20px;
      color: #FFFFFF;
      padding: 2px 3px;
    }
  }

  .sale-drug {
    margin-top: 5px;
    text-align: center;

    img {
      width: 180px;
      height: 180px;
    }
  }

  .sale-drug-info {
    margin-top:2px;
    margin-left: 23px;
    margin-right: 23px;
    width: calc(100% - 46px);

    .drug-name {
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 16px;
      color: #333333;
      text-align: left;
      width: 100%;
      white-space: nowrap;
      /* 防止文本换行 */
      overflow: hidden;
      /* 隐藏溢出的内容 */
      text-overflow: ellipsis;
      /* 超出部分显示省略号 */

    }

    .sell-info {
      margin-top:5px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .price {
        font-family: DIN Alternate, DIN Alternate;
        font-weight: bold;
        font-size: 22px;
        color: #EF1F1F;
        text-align: left;
        font-style: normal;
      }

      .sold-count {
        font-family: Arial, Arial;
        font-weight: 400;
        font-size: 13px;
        color: #ABABAB;
        text-align: left;
        font-style: normal;
      }
    }
  }
}
</style>
